{% extends "base.html" %}
		{% block title %}
		{{action.string}}
		{% endblock %} 
{% block breadcrumb %}
{% if application %}
<li>
	<a title="" href="/admin/application/{{application.alias}}/edit">Приложение - "{{application|truncatewords:2}}"</a>
</li>
{% endif %}
<li>
	<a title="" href="/admin/application/{{application.alias}}/extension/ext_template/">Шаблоны страниц</a>
</li>
<li class="active">
	{{action.string}}
</li>
{% endblock %}

{% block center_content %}
<div class="grid"   style="height: 800px">
	<div class="grid-title">
		<div class="pull-left">
			Свойства шаблона
		</div>
	</div>
	<div class="grid-content">
		<form action="." method="post" enctype="multipart/form-data"  id="page" name="page">
			{% csrf_token %}
			{# Include the hidden fields #}
			{% for hidden in form.hidden_fields %}
			{{ hidden }}
			{% endfor %}

			{# Include the visible fields #}
			<div class="row-fluid">
				<label class="span4">{{form.visible_fields.0.label}}:</label>
				{% if form.visible_fields.0.errors %}
				<div class="span4">
					{{ form.visible_fields.0 }}
				</div>
				<div class="span4">
					<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg"> <span class="k-icon k-warning"> </span> {{ form.visible_fields.0.errors.0 }} </span>
				</div>
				{% else %}
				<div class="span8">
					{{ form.visible_fields.0 }}
				</div>
				{% endif %}
			</div>
			<div class="row-fluid">
				{% if form.visible_fields.1.errors %}
				<div id="editor" style="height:90%; position:absolute; left:90px; right:20px; background-color: #FFFFFF;">{{ form.visible_fields.1.value }}
				</div>
				<div class="span3">
					<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg"> <span class="k-icon k-warning"> </span> {{ form.visible_fields.1.errors.0 }} </span>
				</div>
				{% else %}
				<div id="editor" style="height:90%; position:absolute; left:90px; right:20px;  background-color: #FFFFFF;">{{ form.visible_fields.1.value }}
				</div>
				{% endif %}
			</div>
			<div style="display: none">
				{{ form.visible_fields.2 }}
				{{ form.visible_fields.3 }}
				{{ form.visible_fields.4 }}
			</div>
			<br class="clear">
		</form>
	</div>
</div>
<div class="grid">
	<div class="grid-title">
		<div class="pull-left">
			История
		</div>
	</div>
	<div class="grid-content">
		<div id="history"></div>
	</div>
</div>

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<textarea id="editor_miracle" style="display:none" form="page" name="content">
	
</textarea>




<script type="text/javascript">
	$(document).ready(function() {
		var editor = ace.edit("editor");
		editor.setTheme("ace/theme/chrome");
		editor.getSession().setMode("ace/mode/html");
		editor.getSession().setUseWrapMode(false)

		$('.submit').click(function() {
			$('#editor_miracle').val(editor.getValue());
		})
	}); 
</script>
<script type="text/x-kendo-tmpl" id="template_history">
	<tr>
	<td style="border-bottom-color:lightgray; border-bottom-style: solid; border-bottom-width:1px">
	${revision}
	</td>
	<td style="border-bottom-color:lightgray; border-bottom-style: solid; border-bottom-width:1px">
	${data}
	</td>
	<td style="border-bottom-color:lightgray; border-bottom-style: solid; border-bottom-width:1px">
	${date}
	</td>
	<td style="border-bottom-color:lightgray; border-bottom-style: solid; border-bottom-width:1px">
	${user}
	</td>
	</tr>
</script>
<script type="text/javascript">
$(document).ready(function() {
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWrapMode(false)

$('.submit').click(function() {
$('#editor_miracle').val(editor.getValue());
})
var dataSourceHistory = new kendo.data.DataSource({
transport : {
read : {
url : "/admin/data/history/application/{{application.alias}}/ext_template/{{ form.initial.id }}",
dataType : "jsonp"
}
},
});
$("#history").kendoGrid({
dataSource: dataSourceHistory,
groupable: false,
filterable: true,
sortable: true,
rowTemplate: kendo.template($("#template_history").html()),
columns:[
{ field: "revision", title: "Версия", width:100 },
{ field: "data", title: "Данные" },
{ field: "date", title: "Дата" , width:140},
{ field: "user", title: "Пользователь" , width:120},
]
})											});
</script>

{% endblock %}
{% block left_footer %}
<div class="btn-group pull-right">
<input value="Сохранить без закрытия" type="submit" class="btn btn-primary submit b2" form="page" name="lazy">
<input value="Сохранить" type="submit" class="btn btn-primary submit b2" form="page">
</div>
<input value="Сохранить как новый" type="submit" class="btn btn-primary submit" form="page" name="new">
{% endblock %}